:root {
  --switch-width: 42px;
  --switch-height: 25px;
  --thumb-size: 21px;
  --switch-padding: 2px;
  --switch-transition-duration: 100ms;
}

.small-switch {
  --switch-width: 35px;
  --switch-height: 20px;
  --thumb-size: 15px;
}

.switch-root {
  width: var(--switch-width);
  height: var(--switch-height);
  background-color: var(--swm-switch-root-background);
  border-radius: 9999px;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.vscode-high-contrast .switch-root {
  border: var(--swm-dropdown-border);
}
.vscode-high-contrast .switch-thumb {
  box-sizing: border-box;
  border: var(--swm-dropdown-border);
}

.switch-root[data-state="checked"] {
  background-color: var(--swm-switch-root-background-checked);
}

.switch-root[data-disabled] {
  color: var(--swm-disabled-text);
  background-color: var(--swm-device-select-separator);
  cursor: not-allowed;
}

.switch-thumb {
  display: block;
  width: var(--thumb-size);
  height: var(--thumb-size);
  background-color: white;
  border-radius: 9999px;
  transition: transform var(--switch-transition-duration);
  transform: translateX(var(--switch-padding));
  will-change: transform;
}
.switch-thumb[data-state="checked"] {
  transform: translateX(calc(var(--switch-width) - var(--thumb-size) - var(--switch-padding)));
}

.switch-thumb[data-disabled] {
  background-color: var(--swm-button-disabled);
}
